<script setup lang="ts">

import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showConfirmDialog} from "vant";

const problem = ref('我们提供了你可能会用到的其它链接，点击即可跳转噢！返回只需右滑即可。')

const showStr = ref('');
let index = 0;

// const value1 = "public class Person {\n" +
//     "    // 成员变量\n" +
//     "    private String name;\n" +
//     "    private int age;\n" +
//     "    \n" +
//     "    // 构造方法\n" +
//     "    public Person(String name, int age) {\n" +
//     "        this.name = name;\n" +
//     "        this.age = age;\n" +
//     "    }\n" +
//     "    \n" +
//     "    // 方法\n" +
//     "    public String getName() {\n" +
//     "        return name;\n" +
//     "    }\n" +
//     "    \n" +
//     "    public int getAge() {\n" +
//     "        return age;\n" +
//     "    }\n" +
//     "}"
//
// let keyValuePairs: { key: string, value: any }[] = [
//   { key: 'name', value: value1 },
//   { key: 'age', value: 30 },
//   { key: 'isStudent', value: true }
// ];

onMounted(() => {
  myAxios.get('/user/search')
      .then(res => {
        console.log(res.data.data)
        user.value = res.data.data
      })

  function type() {
    if (index < problem.value.length) {
      showStr.value += problem.value.charAt(index);
      index++;
      setTimeout(type, 60); // 设置打字速度
    }
  }
  type();


})

const user = ref(
    {
      userName: '',
      userAvatar: '',
      userPhone: '',
      userEmail: '',
      userProfile: '',
      gender: '',
      userLevel: 0,
      atPresentExperience: 0
    }
);

const showTest1 = () => {

  //跳转网页
  window.location.href = "https://share.freegpts.org/";
}
const showTest2 = () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.zhaopin.com/";
    })
  }else{
    window.location.href = "https://www.zhaopin.com/";
  }
}
const showTest3 = () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.51job.com/";
    })
  }else{
    window.location.href = "https://www.51job.com/";
  }
  //跳转网页
}
const showTest4 = () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.zhipin.com/";
    })
  }else{
    window.location.href = "https://www.zhipin.com/";
  }
}
const showTest5= () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.liepin.com/";
    })
  }else{
    window.location.href = "https://www.liepin.com/";
  }
}
const showTest6= () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.linkedin.com/";
    })
  }else{
    window.location.href = "https://www.linkedin.com/";
  }

}
const showTest7= () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.lagou.com/";
    })
  }else{
    window.location.href = "https://www.lagou.com/";
  }
}
const showTest8= () => {
  if(user.value.userLevel < 15){
    showConfirmDialog({
      title: '提示',
      message: '你的等级过低，可能你并不适合使用此功能，确定继续使用吗？',
    }).then(() => {
      window.location.href = "https://www.rc114.com/";
    })
  }else{
    window.location.href = "https://www.rc114.com/";
  }
}


const showTestStr = () => {
  showStr.value = '如果跳转有问题，请联系管理员'
}

const activeNames = ref(['1']);


</script>

<template>

  <div class="show">

    <img src="../assets/回答.png" class="show-img1">
    <img src="../assets/卷轴1.png" class="show-img3">
    <div class="show-text-img">
      <img src="../assets/对话框.png" class="show-img">
    </div>
    <div class="show-text">

      <van-collapse v-model="activeNames" border accordion style="opacity: 0.7;">
        <van-collapse-item title="智能AI" name="1">
          <van-grid  style="opacity: 0.7;">
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/js_icon_zb_rukou_chibang.png" text="Chat" @click="showTest1()" />
          </van-grid>
        </van-collapse-item>
        <van-collapse-item title="找工作" name="2">
          <van-grid  style="opacity: 0.7;">
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_sbtrz.png" text="智联招聘" @click="showTest2()" />
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/zjm_icon_youjian.png" text="前程无忧" @click="showTest3()" />

            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_jx.png" text="Boss直聘" @click="showTest4()" />
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/zjm_icon_chengjiu.png" text="猎聘" @click="showTest5()" />
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_jj.png" text="LinkedIn" @click="showTest6()" />
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/zjm_icon_haoyou.png" text="拉钩网" @click="showTest7()" />
            <van-grid-item icon="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/xgn_icon_hc.png" text="人才市场" @click="showTest8()" />
          </van-grid>
        </van-collapse-item>

      </van-collapse>

    </div>
    <div>
      <img src="../assets/AI1.png" class="show-img2" id="ai"  @click="showTestStr()">
      <div class="show-text1">
        <div v-html="showStr"></div>
      </div>
    </div>

  </div>

</template>

<style scoped>

  .show{
    width: 100%;
    height: 80%;
  }
  .show-img{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .show-img1{
    position: absolute;
    width: 100%;
    height: 80%;
  }
  .show-img2{
    position: absolute;
    width: 18%;
    height: 10%;
    top: 79%;
    left: 80%;
  }
  .show-img3{
    position: absolute;
    left: 2%;
    width: 96%;
    height: 20%;
  }

  .show-text{
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    height:52%;
    font-size: 18px;
    font-weight: bold;
  }
  .show-text1{
    position: absolute;
    top: 78%;
    left: 10%;
    width: 70%;
    height:13%
  }
  .show-text-img{
    position: absolute;
    top: 72%;
    width: 100%;
    height: 20%;
  }
</style>